// let tilteListLi = document.querySelectorAll(".tilteList>li");
// let box = document.querySelector(".box");
// let mainUl = box.querySelectorAll(".main");
// //保存当前左右切换分类的状态(决定是否有动画)
// let flag = false;//一开始不是左右切换


// //给所有的标题类表的第一个li绑定事件
// tilteListLi.forEach(function(el, idx){
//     //鼠标移入事件
//     el.addEventListener("mouseleave",function(){
//         //判断是否为左右切换分类（如果是那么就去除动画）
//         if(flag){
//             //清除过渡动画
//             mainUl[idx].style.transition = "none";
//         };

//         //打开状态
//         flag = true;

//         //给对应的分类设置行内样式高度
//         mainUl[idx].style.height = "150px";
//     });
//      //鼠标移出事件
//      el.addEventListener("mouseleave",function(){
//         //给对应的分类设置行内样式高度(恢复默认状态)
//         mainUl[idx].style.height = "0px";
//         //清除过渡动画
//         mainUl[idx].style.transition = "none";
//     });
// });

// //给box大盒子设置鼠标移出事件
// box.addEventListener("mouseleave",function(){
//     console.log("移出box盒子");
//     //恢复动画
//     mainUl.forEach(function(el){
//         el.style.transition = "1s ease";
//     });
//     //恢复关闭切换状态为false
//     flag = false;
// });


let tilteListLi = document.querySelectorAll(".tilteList>li");
let box = document.querySelector(".box");
let mainUl = box.querySelectorAll(".main");
// 保存当前左右切换分类的状态 (决定是否有动画)
let flag = false; // 一开始不是左右切换, 状态为关闭

// 给所有的标题类表的第一个li绑定事件
tilteListLi.forEach(function (el, idx) {
  // 鼠标移入事件
  el.addEventListener("mouseenter", function () {
    // 判断是否为左右切换分类 (如果是那么去除动画)
    if (flag) {
      // 清除过渡动画
      mainUl[idx].style.transition = "none";
    };

    // 打开状态 
    flag = true;

    // 给对应的分类设置行内样式高度
    mainUl[idx].style.height = "150px";
  });

  // 鼠标移出事件
  el.addEventListener("mouseleave", function () {
    // 给对应的分类设置行内样式高度(恢复默认状态)
    mainUl[idx].style.height = "0px";
    // 清除过渡动画
    mainUl[idx].style.transition = "none";
  });
});

// 给box大盒子设置鼠标移出事件
box.addEventListener("mouseleave", function () {
  console.log("移出box盒子");
  // 恢复动画
  mainUl.forEach(function (el) {
    el.style.transition = "1s ease";
  });
  // 恢复关闭切换状态为false
  flag = false;
});